<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>view组件中模板的切换</title>
    <script src="js/1.4.8/angular.js"></script>
    <script src="js/1.4.8/angular-route.js"></script>
</head>
<body>
    <div>
        <a href="#/">index</a>
        <a href="#/book">book</a>
        <a href="#/iphone">iphone</a>
       <!-- <ng-view></ng-view>-->
    </div>
    <div ng-view></div>

    <script type="application/javascript">
        var app = angular.module("app",["ngRoute"]);
        app.config(["$routeProvider",function ($routeProvider) {
            $routeProvider
                    .when('/',{
                        controller:'myCtrl1',
                        template:'<div>{{title}}</div>'
                    })
                    .when('/book',{
                        controller:'myCtrl2',
                        template:'<div>{{title}}</div>'
                    })
                    .when('/iphone',{
                        controller:'myCtrl3',
                        template:'<div>{{title}}</div>'
                    })
                    .otherwise({
                        redirectTo:'/'
                    });
        }]);

        app.controller("myCtrl1",["$scope",function ($scope) {
            $scope.title = "index";
        }]);
        app.controller("myCtrl2",["$scope",function ($scope) {
            $scope.title = "book";
        }]);
        app.controller("myCtrl3",["$scope",function ($scope) {
            $scope.title = "iphone";
        }]);
    </script>
</body>
</html>